<template>
    <div class='phonebar'>
        <!--
            <iframe class="phone-page" src="/static/edb_bar/phoneBar/phonebar.html"></iframe>
        -->
        <div v-if="true" id="softphonebar" style="position: relative;">
            <div class="barBox" id="callStatus">
                <input type="text" id="icallcenter.dialout.input" placeholder="输入手机号码" onKeyDown="if(event.keyCode == 13){softphoneBar.dialout(hojo.byId('icallcenter.dialout.input').value)}" class="ivu-input" />
                <div class="softphone_timer">
                    <div id="softphonebar.peerState"></div>
                    <div id="softphonebar.peerTimeState" class="peerTimeState">00:00:00</div>
                </div>
                <Button icon="ios-telephone" class="DialEnable" id="DialEnable" style="" onclick="softphoneBar.dialout(hojo.byId('icallcenter.dialout.input').value)">
                    外呼
                </Button>
                <Button icon="ios-telephone" class="DialDisable" id="DialDisable" disabled="disabled" style="display: none">
                    外呼
                </Button>
                <Button icon="close" class="HangupEnable" id="HangupEnable" style="display: none" onClick="javascript:phone.hangup();">
                    挂机
                </Button>
                <Button icon="close" class="HangupDisable" id="HangupDisable" disabled="disabled">
                    挂机
                </Button>
                <Button icon="pause" class="HoldEnable" id="HoldEnable" style="display: none" onClick="phone.hold();">
                    保持
                </Button>
                <Button icon="pause" class="HoldDisable" id="HoldDisable" disabled="disabled">
                    保持
                </Button>
                <Button icon="pause" class="HoldGetEnable" id="HoldGetEnable" style="display: none" onClick="phone.unhold();">
                    保持
                </Button>
                <div class="clear5">&nbsp;</div>
                <Button icon="arrow-return-right" class="TransferEnable" id="TransferEnable" style="display: none" onClick="javascript:softphoneBar.toTransfer();">
                    转移
                </Button>
                <Button icon="arrow-return-right" class="TransferDisable" id="TransferDisable" disabled="disabled">
                    转移
                </Button>
                <Button icon="arrow-return-right" class="TransferEnable" id="ConsultTransferEnable" style="display: none" onclick="javascript:phone.transfer('912345','external', {})">
                    转移
                </Button>
                <Button icon="arrow-return-right" class="TransferDisable" id="ConsultTransferDisable" disabled="disabled" style="display: none">
                    转移
                </Button>
                <Button icon="information-circled" class="ConsultEnable" id="ConsultEnable" style="display: none" onclick="javascript:softphoneBar.toConsult();">
                    咨询
                </Button>
                <Button icon="information-circled" class="ConsultDisable" id="ConsultDisable" disabled="disabled">
                    咨询
                </Button>
                <Button icon="information-circled" class="StopConsultEnable" id="StopConsultEnable" style="display: none" onclick="javascript:phone.stopConsult();">
                    咨询
                </Button>
                <Button icon="navicon-round" class="ThreeWayCallEnable" id="ThreeWayCallEnable" style="display: none" onclick="javascript:softphoneBar.toThreeWayCall();">
                    三方
                </Button>
                <Button icon="navicon-round" class="ThreeWayCallDisable" id="ThreeWayCallDisable" disabled="disabled">
                    三方
                </Button>
                <Button icon="navicon-round" class="ThreeWayCallEnable" id="ConsultThreeWayCallEnable" style="display: none" onclick="javascript:phone.threeWayCall('912345')">
                    三方
                </Button>
                <Button icon="navicon-round" class="ThreeWayCallDisable" id="ConsultThreeWayCallDisable" disabled="disabled" style="display: none">
                    三方
                </Button>

            </div>
            <div class="barBox bar-status" id="peerStatus">
                <ButtonGroup size="small">
                    <Button icon="coffee" id="IdleEnable" type="success" class="IdleEnable">
                        空闲
                    </Button>
                    <Button icon="coffee" onclick="javascript:phone.setBusy(false,'0')" id="IdleDisable" class="IdleDisable" style="display: none">
                        空闲
                    </Button>
                    <Button icon="chatbox-working" id="RestEnable" type="success" class="RestEnable" style="display: none">
                        小忙
                    </Button>
                    <Button icon="chatbox-working" onclick="javascript:phone.setBusy(true,'2')" id="RestDisable" class="RestDisable">
                        小忙
                    </Button>
                    <Button icon="clock" id="BusyEnable" type="success" class="BusyEnable" style="display: none">
                        忙碌
                    </Button>
                    <Button icon="clock" onclick="javascript:phone.setBusy(true,'1')" id="BusyDisable" class="BusyDisable">
                        忙碌
                    </Button>
                </ButtonGroup>
            </div>

        </div>
        <div id="netMessage"></div>
        <iframe id="icallcenter.iframe" style="display: none"></iframe>
    </div>
</template>
<script>
import $ from '@/common'
import './page.css'
export default {
    name: 'phonebar',
    mounted() {
        //return
        
    }
}
</script>
<style lang="less">
.phonebar {
    margin-top: -12px;
    .phone-page {
        border: none;
        overflow: visible;
        padding: 0;
        /*height: 200px;*/
    }

    .barBox {
        margin-top: 10px;
    }
    .ivu-btn {
        width: 80px;
    }
    .bar-status {
        .ivu-btn {
            width: 83px
        }
    }
    .peerTimeState {
        padding: 6px;
        text-align: center;
    }
    .softphone_timer {
        float: none;
        clear: both;
        display: block;
    }
}
</style>
